﻿<div>
    <h1>控件类型</h1>
    <div class="well row" style="margin: 0">
        <div class="col-md-7">
            <h3>HTML 控件</h3>
            <table class="table table-bordered">
                <tr>
                    <td>文本值 (失去焦点更新):</td>
                    <td><input type="text" class="form-control" data-bind="value: stringValue" /></td>
                </tr>
                <tr>
                    <td>文本值 (按下键立即更新):</td>
                    <td><input type="text" class="form-control" data-bind='value: stringValue, valueUpdate: "afterkeydown"' /></td>
                </tr>
                <tr>
                    <td>文本值 (多行):</td>
                    <td><textarea class="form-control" data-bind="value: stringValue"> </textarea></td>
                </tr>
                <tr>
                    <td>密码:</td>
                    <td><input type="password" class="form-control" data-bind="value: passwordValue" /></td>
                </tr>
                <tr>
                    <td>复选框:</td>
                    <td><input type="checkbox" data-bind="checked: booleanValue" /></td>
                </tr>
                <tr>
                    <td>下拉列表:</td>
                    <td><select class="form-control" data-bind="options: optionValues, value: selectedOptionValue"></select></td>
                </tr>
                <tr>
                    <td>多选下拉列表:</td>
                    <td><select class="form-control" multiple="multiple" data-bind="options: optionValues, selectedOptions: multipleSelectedOptionValues"></select></td>
                </tr>
                <tr>
                    <td>单选按钮组:</td>
                    <td>
                        <label><input type="radio" value="Alpha" data-bind="checked: radioSelectedOptionValue" />Alpha</label>
                        <label><input type="radio" value="Beta" data-bind="checked: radioSelectedOptionValue" />Beta</label>
                        <label><input type="radio" value="Gamma" data-bind="checked: radioSelectedOptionValue" />Gamma</label>
                    </td>
                </tr>
            </table>
        </div>
        <div class="col-md-5">
            <h3>模型值</h3>
            <table class="table table-bordered">
                <tr>
                    <td>文本值:</td>
                    <td data-bind="text: stringValue"></td>
                </tr>
                <tr>
                    <td>密码:</td>
                    <td data-bind="text: passwordValue"></td>
                </tr>
                <tr>
                    <td>布尔值:</td>
                    <td data-bind='text: booleanValue() ? "True" : "False"'></td>
                </tr>
                <tr>
                    <td>选项:</td>
                    <td data-bind="text: selectedOptionValue"></td>
                </tr>
                <tr>
                    <td>多选选项:</td>
                    <td data-bind="text: multipleSelectedOptionValues"></td>
                </tr>
                <tr>
                    <td>单选按钮选中项:</td>
                    <td data-bind="text: radioSelectedOptionValue"></td>
                </tr>
            </table>
        </div>
    </div>
</div>